<script setup lang="ts">
import { PlusDialog } from "plus-pro-components";
const emits = defineEmits(["update:show"]);
const show = defineModel("show");
const detail = defineModel("detail");

function close() {
  show.value = false;
}

function formatImg(arr: any) {
  return arr.map((item: any) => item.picUrl);
}
</script>

<template>
  <PlusDialog v-model="show" title="举报内容详情" width="60%">
    <div class="h-500 overflow-auto dialog-scroll">
      <div class="flex items-center mb-8">
        <img :src="detail.userHead" class="mr-4 w-40 h-40 rounded-20" />
        {{ detail.userName }}
      </div>
      <div class="mb-8">
        {{ detail.commentContent }}
      </div>
      <div class="flex gap-4 flex-wrap mb-16 w-full">
        <div
          class="w-80 h-80"
          v-for="(item, index) in formatImg(detail.cbCommentPicLinkList)"
        >
          <ElImage
            :src="item"
            class="w-full h-full"
            :preview-src-list="formatImg(detail.cbCommentPicLinkList)"
            :initial-index="index"
          />
        </div>
      </div>
      <div class="font-bold mb-8">
        举报人：{{ detail.cbCommentReport.reporterUserName }}
      </div>
      <div class="mb-16">
        <div class="font-bold text-18 mb-4">举报类型</div>
        <el-tag type="warning">{{ detail.reportTypeName }}</el-tag>
      </div>
      <div class="flex flex-col gap-2">
        <div class="font-bold text-18">问题描述</div>
        <div>
          {{ detail.cbCommentReport.reportContent }}
        </div>
        <div class="flex gap-4 flex-wrap mb-8 w-full">
          <div
            class="w-80 h-80"
            v-for="(item, index) in formatImg(detail.cbCommentReportPicLinkList)"
          >
            <ElImage
              :src="item"
              class="w-full h-full"
              :preview-src-list="formatImg(detail.cbCommentReportPicLinkList)"
              :initial-index="index"
            />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="mx-auto">
        <el-button @click="close"> 关闭 </el-button>
      </div>
    </template>
  </PlusDialog>
</template>
<style lang="scss" scoped>
.dialog-scroll {
  &::-webkit-scrollbar {
    width: 4px;
  }

  /* 自定义滚动条的滑块（thumb） */
  &::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
  }
}
</style>
